<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        font-size: 23px;
        text-align: center;
        line-height: 100px;
        color: white;
        width: 100px;
        height: 100px;
        background-color: #f40;
        border-radius: 50%;
        float: left;
        margin-left: 20px;
      }
      /* 最后一个P标签 */
      #last-boot {
        background-color: rgb(10, 53, 209) !important;
      }
      button {
        width: 100px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <p>16</p>
      <p>16</p>
      <p>16</p>
      <p>16</p>
      <p>16</p>
      <p>16</p>
      <p id="last-boot">16</p>
    </div>

    <br />
    <div style="clear: both">
      <button onclick="start()">开始滚动</button>
      <button onclick="stop()">停止滚动</button>
    </div>

    <script>
      // 6.实现滚动的双色球功能 双色球规则
      //   前6个红球数字范围：1~33 （不能重复）
      //           最后一个篮球：1~16
      //   点击开始 7个球开始随机滚动 点击停止按钮 停止滚动
      //定时器变量 用来清除
      let timer;
      //   点击停止按钮调用此函数 进行停止定时器
      function stop() {
        clearInterval(timer);
      }
      // 点击开始按钮 触发此函数调用
      function start() {
        //定时器 每隔50毫米执行一次
        timer = setInterval(() => {
          //获取一组双色球号码
          let result = createdBoot();
          //循环双色球号码 进行把数字显示到 p标签内
          document.querySelectorAll("p").forEach((item, index) => {
            //因为双色数组的下标 刚好和p标签的下标一致
            item.innerHTML = result[index];
          });
        }, 50);
      }
      //只有调用此函数 就会返回一组双色球号码的数组
      function createdBoot() {
        //声明用来存储球的数组 也是最后返回的数组
        let result = [];
        //循环获取6个1-33的红球
        while (result.length < 6) {
          //使用指定范围随机数获取一个红球
          let val = getRandom(1, 33);
          //判断这个红球之前是否已经存在如果不重复就可以存入到数组内 反之...就不能存入
          if (!result.includes(val)) {
            result.push(val);
          }
        }
        //获取一个篮球
        result.push(getRandom(1, 16));
        //返回结果
        return result;
      }

      function getRandom(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
      }
    </script>
  </body>
</html>
